.icon {
    display: inline-block;
    vertical-align: middle;

    &--button {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
    }

    &--logo {
        width: 113px;
        height: 25px;
        color: #232323;

        @media (prefers-color-scheme: dark) {
            color: var(--gray300);
        }
    }

    &--action {
        width: 17px;
        height: 17px;
    }

    &--cross {
        width: 15px;
        height: 15px;
    }

    &--play {
        width: 24px;
        height: 24px;
    }

    &--circle {
        width: 24px;
        height: 24px;
    }

    &--checkmark {
        width: 24px;
        height: 24px;
    }

    &--exclamation {
        width: 4px;
        height: 24px;
    }

    &--select {
        width: 14px;
        height: 8px;
    }

    &--settings {
        color: #1e1e1e;

        @media (prefers-color-scheme: dark) {
            color: var(--gray300);
        }
    }

    &--start {
        color: #1e1e1e;

        @media (prefers-color-scheme: dark) {
            color: var(--gray300);
        }
    }
}

.light-mode {
    .icon {
        &--settings {
            color: #1e1e1e;
        }

        &--logo {
            color: #232323;
        }
    }

    &--start {
        color: #1e1e1e;
    }
}

.dark-mode {
    .icon {
        &--settings {
            color: var(--gray300);
        }

        &--logo {
            color: var(--gray300);
        }

        &--start {
            color: var(--gray300);
        }
    }
}
